<template>
    <view class="modal-mask" wx:if="{{ isMask }}" catchtouchmove="hideModal" @click="hideModal"></view>
        <view wx:if="{{ isMask }}" class="modal-wrapper {{isShowModal ? 'modal-show' : ''}}" animation="{{animationData}}">
            <view class="modal-header">
                <image src="../../assets/img/close.png" @click="hideModal" class="close"></image>
                <text>时间段选择</text>
                <text @click="hideModal" class="sure" data-ok="1">确定</text>
            </view>
            <slot></slot>
        </view>
</template>

<script lang="ts" setup>
import { ref, defineEmits } from 'vue'
const props = defineProps(['title', 'cancel', 'spaceTapCancel', '', ''])
const emits = defineEmits(['cancel'])
const bottom = ref(0)
const isShowModal = ref(false)
const animationData = ref(null) as any
const isMask = ref()
const close = () => {
    emits('cancel')
}

const showModal = () => {
    const animation = wx.createAnimation({
        duration: 300,
        timingFunction: 'ease-in-out'
    })
    animation.value = animation
    animation.translateY('100%').step()
    isShowModal.value = true
    animationData.value = animation.export()
    setTimeout(() => {
        animation.translateY(0).step()
        animationData.value = animation.export()
    }, 50)
}
const blankClose = () => {
    if (props.spaceTapCancel) close()
}
const catchtap = () => {
    return false
}
</script>

<style scoped>
.modal-mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 999;
  }

  .modal-wrapper {
    position: fixed;
    left: 0;
    bottom: -100%;
    width: 100%;
    height: auto;
    background-color: #fff;
    z-index: 1000;
    transition: all 0.3s ease-out;
  }

  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
  }

  .modal-show {
    bottom: 0;
  }

  @keyframes slide-up {
    0% {
      opacity: 0;
      transform: translateY(100%);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animation-slide-up {
    animation: slide-up 0.3s ease-out;
  }
  .close{
      width: 46rpx;
      height: 46rpx;
  }
  .sure{
      color: #00D679;
      font-size: #00D679 !important;
  }
</style>
